var cityname = '巴中市'
var map
var previouscenter
var defaultStyle = {
    styleJson: styleJson1
}
addmap()
function addmap() {
    map = new BMapGL.Map("container");    // 创建Map实例
    map.centerAndZoom(cityname, 12);
    // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);
    // 添加3D控件
    var navi3DCtrl = new BMapGL.NavigationControl3D();
    map.addControl(navi3DCtrl);
    // 滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: new BMapGL.Size(20, 20) });  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMapGL.Size(20, 20) });
    // 添加缩放控件
    map.addControl(zoomCtrl);
    map.setMapStyleV2(defaultStyle);
    addbdary(cityname)
    addbound()
    map.setTilt(0)
}

// 地图掩模
function addbdary(cityname) {
    var bdary = new BMapGL.Boundary();
    bdary.get(cityname, function (rs) {
        // 绘制行政区
        for (var i = 0; i < rs.boundaries.length; i++) {
            var path = [];
            var xyArr = rs.boundaries[i].split(';');
            var ptArr = [];
            for (var j = 0; j < xyArr.length; j++) {
                var tmp = xyArr[j].split(',');
                var pt = new BMapGL.Point(tmp[0], tmp[1]);
                ptArr.push(pt);
            }
            var mapmask = new BMapGL.MapMask(ptArr, {
                isBuildingMask: true,
                isPoiMask: true,
                isMapMask: true,
                showRegion: 'inside',
                topFillColor: '#5679ea',
                topFillOpacity: 0.5,
                sideFillColor: '#5679ea',
                sideFillOpacity: 0.9
            });
            map.addOverlay(mapmask);
            var border = new BMapGL.Polyline(ptArr, {
                strokeColor: '#4ca7a2',
                strokeWeight: 3,
                strokeOpacity: 1
            })
            map.addOverlay(border);
        }
    })
}
// 限制显示范围
function addbound() {
    var bound = new BMapGL.Bounds(new BMapGL.Point(104.54474514648439, 29.433375599833228), new BMapGL.Point(109.63102444335939, 35.0141346063035));
    map.addOverlay(new BMapGL.Polygon([
        new BMapGL.Point(bound.sw.lng, bound.sw.lat),
        new BMapGL.Point(bound.sw.lng, bound.ne.lat),
        new BMapGL.Point(bound.ne.lng, bound.ne.lat),
        new BMapGL.Point(bound.ne.lng, bound.sw.lat)
    ]))
    try {
        BMapGLLib.AreaRestriction.setBounds(map, bound);
    } catch (e) {
        alert(e);
    }
}



// 功能
$(document).ready(function () {
    // 信息窗口关闭
    $('.ol-popup-closer').on('click', function () {
        $(this).parent().remove();
    })
    // 添加食物图层
    $('#foodlayer').on('click', function () {
        clearall('all')
        addmarkerlayer(foodpositionarray, foodnamearray, fooddiscriptionarray, foodimgsrcarray)
    })
    // 添加风景图层
    $('#viewlayer').on('click', function () {
        clearall('all')
        addmarkerlayer(viewpositionarray, viewnamearray, viewdiscriptionarray, viewimgsrcarray)
    })
    // 添加棱柱
    $('#prismlayer').on('click', function () {
        clearall('all')
        addprism(areaname)
    })
    // 分区域添加天气动画
    $('#climategif').on('click', function () {
        clearall('all')
        addclimategif(areaname1, centercitylatlngarray)
    })
    // 显示行政区
    $('#citylayer').on('click', function () {
        clearall('all')
        addDis(proname, prokind)
    })
    // 关键词查询
    $('#keyquery').on('click', function () {
        map.setMapStyleV2(defaultStyle);
        $('body').find('#driving_way').remove()
        $('body').find('#result').remove()
        $('#container').find('#popup').remove()
        arrPois = []
        map.clearOverlays();
        $('#container').find('#queryaera').remove()
        $('#container').find('.query1').remove()
        $('#container').find('#btns').remove()
        $('#container').append(addquerycontrol('地方关键词：'))
        var $querybutton = $('#container').find('#querybutton11')
        $querybutton.on('click', function () {
            // 判断地图的缩放
            if (map.getZoom() < 13) {
                alert('范围太大！！！')
            }
            else {
                theLocation1()
            }
        })

    })
    // 步行路线查询
    $('#walkroutequry').on('click', function () {
        $('body').find('#driving_way').remove()
        $('body').find('#result').remove()
        $('#container').find('#popup').remove()
        arrPois = []
        map.clearOverlays();
        $('#container').find('.query1').remove()
        $('#container').find('#queryaera').remove()
        $('#container').find('#btns').remove()
        $('#container').append(addquerycontrol1('起点：', '终点：'))
        var $querybutton = $('#container').find('#querybutton12')
        $querybutton.on('click', function () {
            // 判断地图的缩放
            if (map.getZoom() < 13) {
                alert('范围太大！！！')
            }
            else {
                routeplan()
            }
        })
    })
    // 驾车路线查询
    $('#driveroutequery').on('click', function () {
        $('body').find('#driving_way').remove()
        $('body').find('#result').remove()
        $('#container').find('#popup').remove()
        arrPois = []
        map.clearOverlays();
        $('#container').find('.query1').remove()
        $('#container').find('#queryaera').remove()
        $('#container').find('#btns').remove()
        $('#container').append(addquerycontrol2())
        $('#container').append(addlushucontrol())
        var $querybutton = $('#container').find('#querybutton12')
        $querybutton.on('click', function () {
            // 判断地图的缩放
            if (map.getZoom() < 13) {
                alert('范围太大！！！')
            }
            else {
                arrPois = []
                map.clearOverlays();
                const startlon = parseFloat($('#container').find('#querycontrol1').val())
                const startlat = parseFloat($('#container').find('#querycontrol2').val())
                const endlon = parseFloat($('#container').find('#querycontrol3').val())
                const endlat = parseFloat($('#container').find('#querycontrol4').val())
                driverouteplan(cityname, startlon, startlat, endlon, endlat)
            }
        })

    })
    // 公交路线查询
    $('#busroutequery').on('click', function () {
        var endPoint, startPoint = null
        $('body').find('#driving_way').remove()
        $('body').find('#result').remove()
        $('#container').find('#popup').remove()
        arrPois = []
        map.clearOverlays();
        $('#container').find('.query1').remove()
        $('#container').find('#queryaera').remove()
        $('#container').find('#btns').remove()
        $('body').append(addquerycontrol4())
        $('body').append(addquerycontrol5())
        var localSearch = new BMapGL.LocalSearch(map, {
            onSearchComplete: function (results) {
                //获取当前页的结果数
                var html = ``;
                for (var i = 0; i < results.getCurrentNumPois(); i++) {
                    html += `<li class='result_list1_li' data-lat=${results.getPoi(i).point.lat} data-lng=${results.getPoi(i).point.lng}>${results.getPoi(i).title}</li>`
                }
                $('#result_list1').html(html);
            }
        });
        var localSearch1 = new BMapGL.LocalSearch(map, {
            onSearchComplete: function (results) {
                //获取当前页的结果数
                var html = ``;
                for (var i = 0; i < results.getCurrentNumPois(); i++) {
                    html += `<li class='result_list2_li' data-lat=${results.getPoi(i).point.lat} data-lng=${results.getPoi(i).point.lng}>${results.getPoi(i).title}</li>`
                }
                $('#result_list2').html(html);
            }
        });
        $('#result_list1').on('click', 'li', function () {
            if (!$(this).hasClass('be_selected')) {
                $(this).addClass('be_selected')
                $('#result_list1 .be_selected').not(this).removeClass('be_selected');
                var lat = Number($(this).attr('data-lat'));
                var lng = Number($(this).attr('data-lng'));
                startPoint = new BMapGL.Point(lng, lat);
            }
        })
        $('#result_list2').on('click', 'li', function () {
            if (!$(this).hasClass('be_selected')) {
                $(this).addClass('be_selected')
                $('#result_list2 .be_selected').not(this).removeClass('be_selected');
                var lat = Number($(this).attr('data-lat'));
                var lng = Number($(this).attr('data-lng'));
                endPoint = new BMapGL.Point(lng, lat);
            }
        })


        $('#searchstart').on('click', function () {
            var startvalue = $('#busroutequery1').val();
            localSearch.search(startvalue);
        });
        $('#searchend').on('click', function () {
            var endvalue = $('#busroutequery2').val();
            localSearch1.search(endvalue);
        });
        $('#search').on('click', function () {
            // 判断地图的缩放
            if (map.getZoom() < 13) {
                alert('范围太大！！！')
            }
            else {
                busroutequery(startPoint, endPoint)
            }
        })

    })
    // 矩形区域查询
    $('#areaquery').on('click', function () {
        previouscenter = map.getCenter()
        clearall('layercontrol')
        if (map1) {
            map1.clearOverlays();
        }
        $('#container').find('#queryaera').remove()
        $('#container').find('.query1').remove()
        $('#container').find('#btns').remove()
        map1 = new BMap.Map("container");
        if (previouscenter) {
            map1.centerAndZoom(new BMap.Point(previouscenter['lng'], previouscenter['lat']), 16);
        }
        else {
            map1.centerAndZoom('巴中市', 16);
        }
        $('#container').append(addquerycontrol('地方关键词：'))
        $('#container').find('#querybutton11').on('click', function () {
            map1.clearOverlays();
            rectareaquery($('#container').find('#querycontrol').val())
        })
    })
    // 骑行路线查询
    $('#cycleroutequery').on('click', function () {
        $('body').find('#driving_way').remove()
        $('body').find('#result').remove()
        $('#container').find('#popup').remove()
        arrPois = []
        map.clearOverlays();
        $('#container').find('.query1').remove()
        $('#container').find('#queryaera').remove()
        $('#container').find('#btns').remove()
        $('#container').append(addquerycontrol1('起点：', '终点：'))
        $('#querybutton12').on('click', function () {
            // 判断地图的缩放
            if (map.getZoom() < 13) {
                alert('范围太大！！！')
            }
            else{
                map.clearOverlays()
                var positionarray1 = []
                positionarray1.push($('#querycontrol1').val())
                positionarray1.push($('#querycontrol2').val())
                // 使用 async/await 调用 Geocode 函数  
                async function fetchStartEndpoints() {
                    try {
                        const startendpoint2 = await Geocode1(positionarray1, cityname);
                        cycleroutequery(startendpoint2[0], startendpoint2[1])
                    } catch (error) {
                        console.error('解析地址时出错：', error);
                    }
                }
    
                // 调用 fetchStartEndpoints 函数  
                fetchStartEndpoints();
            }
        })
    })
    // 路况显示
    $('#addpathsituation').on('click', function () {
        clearall('layercontrol')
        map.setTrafficOn();
    })
    // 清除功能
    $('#clearcontrol').on('click', function () {
        clearall('all')
    })

})

// 添加marker信息窗口
// 食物对应信息
const foodpositionarray = [[106.63584833862305, 31.789560000000048], [106.76897, 31.85131], [106.598282, 31.74048], [106.746918, 31.941132], [107.10358, 31.56054]]
const foodnamearray = ['提糖麻饼', '魏油茶', '十大碗', '枣林鱼', '平昌油炸鱼']
const fooddiscriptionarray = ['四川巴中恩阳镇的“提糖麻饼”，名扬川内外，在“四川南江红叶节”上被誉为最好的特产。麻饼在恩阳已有五百多年的历史，林家世代以此为业。提糖麻饼的制做工艺都是一线单传，从不外传。',
    '魏油茶，始创于明未清初，距今已有三百多年历史，它采用优质糯米，精选调料，独特的制作方法，使闻而清香、食而爽口，长期以来，备受欢迎，一直誉满巴州。',
    '十大碗由品碗、沙参鸡、炸鱼、肘子、扣肉、水酥肉、粉蒸肉、坨子肉、带丝鸭、虾米汤十道主菜组成，寓意十全十美。',
    '巴中枣林鱼，它色泽洁白如玉，汤味浓郁醇厚，鱼汤泡饭更是让人回味无穷。如今，枣林鱼的制作技艺已被列为巴中市第六批非物质文化遗产，可见其独特魅力。',
    '平昌油炸鱼精选当地野生河鱼，搭配平昌本土大米米粉，再佐以密料腌制，经过农户种植的菜籽油多道传统工艺精心烹制而成。'
]
const foodimgsrcarray = ['img/提糖麻饼.jpg', 'img/魏油茶.png', 'img/巴中十大碗.jpg', 'img/巴中枣林鱼.jpg', 'img/平昌油炸鱼.jpg']
// 风景对应信息
const viewpositionarray = [[106.63602, 31.78956], [106.765479, 31.850934], [107.109816, 31.583834], [107.185551, 32.375221], [107.015232, 31.825106], [107.251707, 31.919735], [106.718564, 31.976687], [106.807186, 32.694949], [106.87257, 32.720381]]
const viewnamearray = ['恩阳古镇', '南龛摩崖造像', '佛头山', '诺水河风景区', '水宁寺造像', '红四方面军通江旧址群', '阴宁山', '光雾山', '米仓森林公园']
const viewdiscriptionarray = ['建筑被称为凝固的艺术，建筑本身承载着许多人文元素。古镇的建筑风格与川北风格一脉相承。白色的土墙保护着墙内的竹篱板，青石板铺就了这里的每一寸土地。',
    '南龛造像融合了蜀地的民俗风情。各种佛像精巧玲珑，姿态各异，气质浑厚，端庄丰满，神情潇洒，典雅大方。南龛摩崖造像是古代劳动人民巧夺天工的艺术精品。',
    '附近众山簇拥环护，状如众星拱月。佛头山因传说“观音大士派佛头童子下凡镇守龙潭溪”而得名。佛头山佛光乃天下奇观，由于“佛光”的形成条件非常特殊，故又名“宝光”。',
    '世界地质公园 、国家AAAA级景区。景区由“诺水洞天”、“临江丽峡景区”、“空山天盆”、“唱歌石林”四大独立景区组成。中峰洞被中国溶洞协会会长考察认定为“天下第一洞”。',
    '“水宁盛唐彩雕全国第一”，“巴中石窟，国之瑰宝”。造像多为盛唐作品，少数为晚唐雕刻。堪称我国唐代石窟艺术中高水平的作品之一。',
    '纪念中国工农红军第四方面军创建、发展、壮大川陕苏区。前中共中央总书记、中华人民共和国主席、中央军委主席江泽民题写了馆名。馆内现展出、收藏川陕苏区时期史料、图片、实物及历史文物7800余件。',
    '历史悠久，自北魏以来就是道教、佛教圣地。享誉川北，有：“川北胜秀”之美誉。阴灵山石刻碑林文化为中国四大书法碑林之一。',
    '被文化和旅游部确定为国家AAAAA级旅游景区。光雾山地处川陕交界处，桃园南，因常年云雾绕而得名。含焦家河、韩溪河、燕子岩、普陀山等360多个景点。',
    '古有“巴西外户，蜀北岩疆”之称。森林覆盖率为97.3%，被称之为“天然氧吧”。始建于1995年，2007年，被评为“中国红叶之乡”。'
]
const viewimgsrcarray = ['img/恩阳古镇.jpeg', 'img/南龛摩崖造像.jpeg', 'img/佛头山.jpeg', 'img/诺水河风景区.jpeg', 'img/水宁寺造像.jpeg', 'img/红四方面军通江旧址群.jpeg', 'img/阴宁山.jpg', 'img/巴中光雾山.jpg', 'img/米仓森林公园.jpeg']
function addmarkerlayer(array1, array2, array3, array4) {
    for (let i = 0; i < array1.length; i++) {
        // 创建Marker标注  
        var pt = new BMapGL.Point(array1[i][0], array1[i][1]);
        var marker = new BMapGL.Marker(pt);
        map.addOverlay(marker);

        var sContent = `<h4 style='margin:0 0 5px 0;'>${array2[i]}</h4>
    <img style='float:right;margin:0 4px 22px' id='imgDemo${i}' src='${array4[i]}' width='130' height='130'/>
    <p style='margin:0;line-height:1.5;font-size:12px;text-indent:2em'>
    ${array3[i]}
    </p></div>`;
        var popcontentid = 'popcontent' + i
        addCustomInfoWindow(pt, sContent, popcontentid)
    }

}
// 图文信息框
function addCustomInfoWindow(pt, content, popcontentid) {
    function ComplexCustomOverlay(point) {
        this._point = point;
    }
    ComplexCustomOverlay.prototype = new BMapGL.Overlay();
    ComplexCustomOverlay.prototype.initialize = function (map) {
        var that = this
        this._map = map;
        var pixel = map.pointToOverlayPixel(this._point, {
            useRound: false,   // 设置此参数，防止抖动
            fixPosition: true  // 覆盖物跨越180时修正位置
        });
        // 坐标查询弹窗
        // 创建一个div元素作为弹出框，并设置其id和class属性  
        var popup = this._div = document.createElement('div');
        popup.id = 'popup';
        popup.classList.add('ol-popup');

        // 创建一个a元素作为关闭按钮，并设置其href、id和class属性  
        var popupCloser = document.createElement('a');
        popupCloser.href = '#';
        popupCloser.classList.add('ol-popup-closer');

        // 创建一个新的div元素作为弹出框的内容，并设置其id  
        var popupContent = document.createElement('div');
        popupContent.id = popcontentid;
        popupContent.classList.add('popup-content');

        // 将关闭按钮和内容添加到弹出框中  
        popup.appendChild(popupCloser);
        popup.appendChild(popupContent);


        map.getPanes().labelPane.appendChild(popup);

        return popup;
    }
    ComplexCustomOverlay.prototype.draw = function () {
        var map = this._map;
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x - 160 + "px";
        this._div.style.top = pixel.y - 240 + "px";
    }

    var myCompOverlay = new ComplexCustomOverlay(pt);
    map.addOverlay(myCompOverlay);
    $('#' + popcontentid).html(content);

}

// 棱柱
var customStyle = {
    styleJson: styleJson2
}
const areaname = ['巴州区', '恩阳区', '通江县', '南江县', '平昌县']
// const areaname = ['巴中市']
function addprism(areaname) {
    map.setMapStyleV2(customStyle);
    for (let k = 0; k < areaname.length; k++) {
        var bd1 = new BMapGL.Boundary();
        bd1.get(areaname[k], function (rs) {
            let count = rs.boundaries.length;
            for (let i = 0; i < count; i++) {
                let path = [];
                let str = rs.boundaries[i].replace(' ', '');
                let points = str.split(';');
                for (let j = 0; j < points.length; j++) {
                    let lng = points[j].split(',')[0];
                    let lat = points[j].split(',')[1];
                    path.push(new BMapGL.Point(lng, lat));
                }
                let prism = new BMapGL.Prism(path, 5000, {
                    topFillColor: '#5679ea',
                    topFillOpacity: 0.6,
                    sideFillColor: '#5679ea',
                    sideFillOpacity: 0.9
                });
                map.addOverlay(prism);

                // 绑定鼠标事件
                var events = ['click', 'mouseover', 'mouseout'];
                for (let i = 0; i < events.length; i++) {
                    prism.addEventListener(events[i], e => {
                        switch (events[i]) {
                            case 'click':
                                alert(areaname[k]);
                                break;
                            case 'mouseover':
                                e.target.setTopFillColor('#475fab');
                                e.target.setTopFillOpacity(1);
                                break;
                            case 'mouseout':
                                e.target.setTopFillColor('#5679ea');
                                e.target.setTopFillOpacity(0.5);
                                break;
                        }
                    });
                }
            }

        })
        map.setTilt(50)
    }
}

// 添加天气动画 
// const centercitylatlngarray = [[106.775512, 31.855968], [106.632708, 31.803841], [107.112889, 31.562493], [106.830462, 32.352288], [107.110589, 31.56397]]
const centercitylatlngarray = [[106.775512, 31.855968]]
const areaname1 = ['bazhong']
function addclimategif(array, array1) {
    const api_key = 'S8s2Gt6boA0Qw5es-';
    const language = 'zh-Hans';
    const unit = 'c';

    for (let j = 0; j < array.length; j++) {
        // 构造URL  
        var url = `https://api.seniverse.com/v3/weather/now.json?key=${api_key}&location=${array[j]}&language=${language}&unit=${unit}`;
        var gifareaid = 'gifarea' + j
        var pt1 = new BMapGL.Point(array1[j][0], array1[j][1]);
        // 使用fetch API发送GET请求  
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json(); // 解析JSON响应  
            })
            .then(data => {
                addclimatelayer(pt1, queryclimategif(data['results'][0]['now']['text']), gifareaid)
            })
            .catch(error => {
                // 请求失败，处理错误  
                console.error('There has been a problem with your fetch operation:', error);
            });
    }
}

// 根据查询到的天气返回gif的src
function queryclimategif(climatename) {
    if (climatename.includes('云')) {
        return 'img/多云.gif'
    }
    else if (climatename.includes('晴')) {
        return 'img/晴天.gif'
    }
    else if (climatename.includes('雪')) {
        return 'img/雪天.gif'
    }
    else if (climatename.includes('雷') && climatename.includes('雨')) {
        return 'img/雷雨.gif'
    }
    else if (climatename.includes('雨')) {
        return 'img/雨天.gif'
    }
    else if (climatename.includes('阴')) {
        return 'img/阴天.gif'
    }
}

// 天气覆盖物
function addclimatelayer(pt, src1, gifareaid) {
    function ComplexCustomOverlay1(point) {
        this._point = point;
    }
    ComplexCustomOverlay1.prototype = new BMapGL.Overlay();
    ComplexCustomOverlay1.prototype.initialize = function (map) {
        var that = this
        this._map = map;
        var pixel = map.pointToOverlayPixel(this._point, {
            useRound: false,   // 设置此参数，防止抖动
            fixPosition: true  // 覆盖物跨越180时修正位置
        });
        // 天气图标 
        var imgarea = this._img = document.createElement('img');
        imgarea.classList.add('climateimformation')
        imgarea.id = gifareaid
        map.getPanes().labelPane.appendChild(imgarea);
        return imgarea;
    }
    ComplexCustomOverlay1.prototype.draw = function () {
        var map = this._map;
        var pixel = map.pointToOverlayPixel(this._point);
        this._img.style.left = pixel.x + "px";
        this._img.style.top = pixel.y + "px";

    }

    var myCompOverlay = new ComplexCustomOverlay1(pt);
    map.addOverlay(myCompOverlay);
    $('#' + gifareaid).attr("src", src1)
}

// 行政区图层
var proname = '巴中市';
var prokind = 2;
var dist = null;
function addDis(proname, prokind) {
    map.removeDistrictLayer(dist);
    dist = new BMapGL.DistrictLayer({
        name: '(' + proname + ')',
        kind: prokind,
        fillColor: '#618bf8',
        strokeColor: '#daeafa',
        viewport: true
    });
    map.addDistrictLayer(dist);
    // --- 行政区划添加鼠标事件 ---
    dist.addEventListener('mouseover', function (e) {
        e.currentTarget.setFillColor('#9169db');
    });
    dist.addEventListener('mouseout', function (e) {
        e.currentTarget.setFillColor(e.currentTarget.style.fillColor);
    });
}

// 查询控件1
function addquerycontrol(text1) {
    var $queryarea = $('<div>', {
        'id': 'queryaera'
    }).text(text1)
    var $querycontrol = $('<input>', {
        'class': 'querycontrol',
        'id': 'querycontrol',
        'type': 'text'
    })
    var $querybutton = $('<button>', {
        'id': 'querybutton11',
    }).text('查询')
    $queryarea.append($querycontrol)
    $queryarea.append($querybutton)
    return $queryarea
}
// 查询控件2
function addquerycontrol1(text1, text2) {
    var $query1 = $('<div>', {
        'class': 'query1'
    })
    var $queryarea11 = $('<div>', {
        'class': 'queryarea1',
    }).text(text1)
    var $queryarea12 = $('<div>', {
        'class': 'queryarea1',
    }).text(text2)
    var $querycontrol1 = $('<input>', {
        'class': 'querycontrol',
        'type': 'text',
        'id': 'querycontrol1'
    })
    var $querycontrol2 = $('<input>', {
        'class': 'querycontrol',
        'type': 'text',
        'id': 'querycontrol2'
    })
    var $querybutton = $('<button>', {
        'id': 'querybutton12',
    }).text('查询')

    $queryarea11.append($querycontrol1)
    $queryarea12.append($querycontrol2)
    $query1.append($queryarea11)
    $query1.append($queryarea12)
    $query1.append($querybutton)

    return $query1
}

// 查询控件3
function addquerycontrol2() {
    var $query2 = $('<div>', {
        'class': 'query1'
    })
    var $queryarea21 = $('<div>', {
        'class': 'queryarea1',
    }).text('起点经度：')
    var $queryarea22 = $('<div>', {
        'class': 'queryarea1',
    }).text('起点纬度：')
    var $queryarea23 = $('<div>', {
        'class': 'queryarea1',
    }).text('终点经度：')
    var $queryarea24 = $('<div>', {
        'class': 'queryarea1',
    }).text('终点纬度：')
    var $querycontrol1 = $('<input>', {
        'class': 'querycontrol',
        'type': 'text',
        'id': 'querycontrol1'
    })
    var $querycontrol2 = $('<input>', {
        'class': 'querycontrol',
        'type': 'text',
        'id': 'querycontrol2'
    })
    var $querycontrol3 = $('<input>', {
        'class': 'querycontrol',
        'type': 'text',
        'id': 'querycontrol3'
    })
    var $querycontrol4 = $('<input>', {
        'class': 'querycontrol',
        'type': 'text',
        'id': 'querycontrol4'
    })
    var $querybutton = $('<button>', {
        'id': 'querybutton12',
    }).text('查询')

    $queryarea21.append($querycontrol1)
    $queryarea22.append($querycontrol2)
    $queryarea23.append($querycontrol3)
    $queryarea24.append($querycontrol4)
    $query2.append($queryarea21)
    $query2.append($queryarea22)
    $query2.append($queryarea23)
    $query2.append($queryarea24)
    $query2.append($querybutton)

    return $query2
}

// 查询控件4
function addquerycontrol4() {
    var startArea = $('<div>').attr('class', 'queryarea1').append(
        '起点：',
        $('<input>').attr({
            type: 'text',
            class: 'querycontrol',
            id: 'busroutequery1'
        }),
        $('<button>').attr({
            class: 'searchstartend',
            id: 'searchstart',
        }).text('确定')
    );

    // 创建终点部分  
    var endArea = $('<div>').attr('class', 'queryarea1').append(
        '终点：',
        $('<input>').attr({
            type: 'text',
            class: 'querycontrol',
            id: 'busroutequery2'
        }),
        $('<button>').attr({
            class: 'searchstartend',
            id: 'searchend',
        }).text('确定')
    );

    // 创建查询控制区域  
    var queryControlArea = $('<div>').attr('id', 'querycontrolarea').append(
        $('<select>').append(
            $('<option>').attr({ value: '0' }).text('推荐方案'),
            $('<option>').attr({ value: '1' }).text('最少时间'),
            $('<option>').attr({ value: '2' }).text('最少换乘'),
            $('<option>').attr({ value: '3' }).text('最少步行'),
            $('<option>').attr({ value: '4' }).text('不乘地铁'),
            $('<option>').attr({ value: '5' }).text('优先地铁')
        ),
        $('<button>').attr({
            id: 'search',
        }).text('查询')
    );

    // 创建查询结果元素  
    var queryResult = $('<p>').attr('id', 'queryresult');

    // 组装整个driving_way元素  
    var drivingWay = $('<div>').attr('id', 'driving_way').append(
        startArea,
        endArea,
        queryControlArea,
        queryResult
    );
    return drivingWay
}

// 查询控件5
function addquerycontrol5() {
    // 创建结果部分的标题  
    var resultTitle = $('<p>').attr('class', 'result_title').append(
        $('<span>').text('起点'),
        $('<span>').text('终点')
    );

    // 创建结果列表区域  
    var resultListArea = $('<div>').attr('id', 'resultlistarea').append(
        $('<ul>').attr('id', 'result_list1'),
        $('<ul>').attr('id', 'result_list2')
    );

    // 组装整个result元素  
    var result = $('<div>').attr('id', 'result').append(
        resultTitle,
        resultListArea
    );
    return result
}


// 路书控件
function addlushucontrol() {
    var $ul = $('<ul>', {
        id: 'btns'
    });
    $ul.append(
        $('<li>', { id: 'run1', text: '开始' }),
        $('<li>', { id: 'stop1', text: '停止' }),
        $('<li>', { id: 'pause1', text: '暂停' }),
        $('<li>', { id: 'hide1', text: '隐藏信息窗口' }),
        $('<li>', { id: 'show1', text: '展示信息窗口' }),
    );
    return $ul
}

// 查找地址
function theLocation1() {
    var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map }
    });
    $(document).ready(function () {
        var locationname = document.getElementById("querycontrol").value
        if (map.getZoom() >= 11) {
            local.search(locationname);
        }
        else {
            alert('范围太大！！！')
        }
    })
}

// 步行路线规划
function routeplan() {
    var walking = new BMapGL.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });
    $(document).ready(function () {
        var startname = document.getElementById("querycontrol1").value
        var destinationname = document.getElementById("querycontrol2").value
        if (map.getZoom() >= 11) {
            walking.search(startname, destinationname);
        }
        else {
            alert('范围太大！！！')
        }
    })
}


// 驾车路线规划
var lushu
var arrPois = [];
var drv
function driverouteplan(city, startlon, startlat, endlon, endlat) {
    // 实例化一个驾车导航用来生成路线
    drv = new BMapGL.DrivingRoute(city, {
        onSearchComplete: function (res) {
            if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                var plan = res.getPlan(0);
                for (var j = 0; j < plan.getNumRoutes(); j++) {
                    var route = plan.getRoute(j);
                    arrPois = arrPois.concat(route.getPath());
                }

                map.addOverlay(new BMapGL.Polyline(arrPois, { strokeColor: 'rgba(0,255,255,1)', strokeWeight: 6, }));
                map.setViewport(arrPois);
                var startmarker = new BMapGL.Marker(arrPois[0])
                map.addOverlay(startmarker)
                var endmarker = new BMapGL.Marker(arrPois[arrPois.length - 1])
                map.addOverlay(endmarker)
                //图片
                var fly = './img/travel holiday vacation 3-03.svg'
                lushu = new BMapGLLib.LuShu(map, arrPois, {
                    defaultContent: '起点为：' + '(' + startlon.toFixed(6) + ',' + startlat.toFixed(6) + ')' + '<br>' + '终点为：' + '(' + endlon.toFixed(6) + ',' + endlat.toFixed(6) + ')', // "信息窗口文案"
                    autoView: true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                    speed: 20000,
                    icon: new BMapGL.Icon(fly, new BMapGL.Size(48, 48), { anchor: new BMapGL.Size(24, 24) }),
                    enableRotation: true, // 是否设置marker随着道路的走向进行旋转
                });
            }
            $("#run1").on('click', function () {
                //开始
                lushu.start();
            })
            $("#stop1").on('click', function () {
                // 停止
                lushu.stop();
            })
            $("#pause1").on('click', function () {
                //暂停
                lushu.pause();
            })
            $("#hide1").on('click', function () {
                //隐藏信息窗口
                lushu.hideInfoWindow();
            })
            $("#show1").on('click', function () {
                //展示信息窗口
                lushu.showInfoWindow();
            })
            if (arrPois.length == 0) {
                $('#container').append(adddialobox())
                $('#container').find('#popup-content').html('未查询到地点！！<br>请检查输入');
                $('#popup-closer').on('click', function () {
                    $('#container').find('#popup').remove()
                })
            }
        }
    });
    var start = new BMapGL.Point(startlon, startlat);
    var end = new BMapGL.Point(endlon, endlat);
    drv.search(start, end);
}

// 公交路线查询
function busroutequery(start, end) {
    var routePolicy = [BMAP_TRANSIT_POLICY_RECOMMEND, BMAP_TRANSIT_POLICY_LEAST_TIME, BMAP_TRANSIT_POLICY_LEAST_TRANSFER, BMAP_TRANSIT_POLICY_LEAST_WALKING, BMAP_TRANSIT_POLICY_AVOID_SUBWAYS, BMAP_TRANSIT_POLICY_FIRST_SUBWAYS];
    var transit = new BMapGL.TransitRoute(map, {
        renderOptions: { map: map, panel: 'queryresult' },
        policy: 0,

    });
    map.clearOverlays();
    var i = $("#driving_way select").val();
    search(start, end, routePolicy[i]);
    function search(start, end, route) {
        transit.setPolicy(route);
        transit.search(start, end);
    }
}

// 区域检索
var map1
function rectareaquery(text) {
    var local = new BMap.LocalSearch(map1, {
        renderOptions: { map: map1 }
    });
    var overlaycomplete = function (e) {//画完之后的回掉函数
        var pStart = e.overlay.getPath()[3];//矩形左上角坐标
        var pEnd = e.overlay.getPath()[1];//矩形右上角坐标
        var bs = new BMap.Bounds(pStart, pEnd); //自己规定范围
        local.searchInBounds(text, bs);
        drawingManager.removeEventListener('overlaycomplete', overlaycomplete)
        drawingManager.close()
    };
    var styleOptions = {
        strokeColor: "blue",    //边线颜色。
        fillColor: "white",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map1, {
        isOpen: true,
        rectangleOptions: styleOptions,
    })
    // 检查 BMapLib 是否已加载  
    if (typeof BMapLib !== 'undefined') {
        drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE);
        // 添加事件监听器  
        if (drawingManager) {
            drawingManager.addEventListener('overlaycomplete', overlaycomplete);
        } else {
            console.error('DrawingManager is not defined!');
        }
    } else {
        console.error('BMapLib is not defined!');
    }
}


// 对话框
function adddialobox() {
    // 创建一个新的div元素，并设置其id和class属性  
    var $popup = $('<div>')
        .attr('id', 'popup')
        .addClass('ol-popup');
    // 创建一个a元素作为关闭按钮，并设置其id和class属性  
    var $popupCloser = $('<a>')
        .attr('href', '#')
        .attr('id', 'popup-closer')
        .addClass('ol-popup-closer');
    $popup.append($popupCloser);
    $popup.append($popupContent);
    return $popup
}

// 骑行路线查询
function cycleroutequery(start, end) {
    // 假设你已经有了 'map' 这个 BMapGL.Map 实例  
    var riding = new BMapGL.RidingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true
        },
        onSearchComplete: function (res) {
            if (riding.getStatus() == BMAP_STATUS_SUCCESS) {
                var arrPois = []
                var plan = res.getPlan(0);
                for (var j = 0; j < plan.getNumRoutes(); j++) {
                    var route = plan.getRoute(j);
                    arrPois = arrPois.concat(route.getPath());
                }

                var pl = new BMapGL.Polyline(arrPois, { strokeColor: 'rgba(0,255,255,1)', strokeWeight: 6, });
                setTimeout('trackAni.start()', 3000);
                trackAni = new BMapGLLib.TrackAnimation(map, pl, {
                    overallView: true,
                    tilt: 30,
                    duration: 20000,
                    delay: 300,
                })
            }
        }

    });

    riding.search(start, end);
}
function Geocode1(positionarray, cityname) {
    // 创建一个Promise数组来保存所有的异步操作  
    const promises = positionarray.map((position, index) => {
        return new Promise((resolve, reject) => {
            // 创建地址解析器实例（通常可以移出循环外作为共享实例）  
            var myGeo = new BMapGL.Geocoder();
            myGeo.getPoint(position, function (point) {
                if (point) {
                    // 解析成功，resolve Promise  
                    resolve(point);
                } else {
                    // 解析失败，reject Promise  
                    reject(new Error('无法解析地址'));
                }
            }, cityname);
        });
    });

    // 使用Promise.all等待所有的异步操作完成  
    return Promise.all(promises).then(results => {
        // 所有地址解析完成，返回结果数组  
        return results;
    }).catch(error => {
        // 如果有任何异步操作失败，抛出错误  
        throw error;
    });
}


// 清除功能
function clearall(text) {
    arrPois = []
    $('#container').find('#queryaera').remove()
    $('#container').find('#popup').remove()
    $('#container').find('.query1').remove()
    $('#container').find('#btns').remove()
    $('body').find('#driving_way').remove()
    $('body').find('#result').remove()

    if (text == 'layercontrol') {
        addbdary(cityname)
        addbound()
        if (map1) {
            map1.clearOverlays();
        }
        map.clearOverlays()
    }
    else if (text == 'all') {
        addmap()
    }
    map.setTilt(0)
    // 恢复默认样式
    map.setMapStyleV2(defaultStyle);
}
